<template>
  <div class="add-address">
    <van-nav-bar title="新增收货地址" left-arrow @click-left="$router.back()" />
    <van-cell class="common-cell" value="收货地址" />
    <van-form @submit="onSubmit">
      <van-field class="common-cell" v-model="form.name" name="姓名" label="姓名" placeholder="请输入收货人姓名" />
      <van-field class="common-cell" v-model="form.phone" name="电话" label="电话" placeholder="请输入收货人手机号" />
      <van-field class="common-cell" readonly clickable name="area" label="选择地区">
        <template #extra>
          <!-- 省 -->
          <select name="" id="" v-if="areaList" @change="getProvinces($event.target.value)">
            <option :value="key" v-for="(item,key) in areaList" :key="key">{{ item.name }}</option>
          </select>
          <!-- 市 -->
          <select v-model="cityId" name="" id="" v-if="myCity" @change="getRegions($event.target.value)">
            <option :value="key" v-for="(item,key) in myCity" :key="key">{{ item.name }}</option>
          </select>
          <!-- 区 -->
          <select v-model="regionId" name="" id="" v-if="region">
            <option :value="key" v-for="(item,key) in region" :key="key">{{ item.name }}</option>
          </select>
        </template>
      </van-field>

      <van-field class="common-cell" v-model="form.detail" name="detail" label="详细地址" placeholder="街道门牌、楼层等信息" />

      <div style="margin: 23px">
        <van-button round block color="#f9432f" native-type="submit" style="font-size:17px">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { addAddress, getAreaList } from '@/apis/address'
export default {
  name: 'addAddress',
  data () {
    return {
      value: '',
      showArea: false,
      form: {
        region: [],
        name: '',
        phone: '',
        detail: ''
      },
      areaList: {},
      list: {},
      provinceId: 0,
      cityId: 0,
      regionId: 0
    }
  },
  watch: {
    cityId: {
      handler () {
        this.regionId = Object.keys(this.region)[0]
      }
    }
  },
  async created () {
    this.AsyncGetAreaList()
  },
  methods: {
    onConfirm (values) {
      this.form.region = values.map((item) => ({ value: +item.code, label: item.name }))
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    onSubmit () {
      this.form.region = [
        { value: this.provinceId, label: this.areaList[this.provinceId].name },
        { value: this.cityId, label: this.myCity[this.cityId].name },
        { value: this.regionId, label: this.region[this.regionId].name }
      ]
      console.log(this.form)
      if (this.form.region === [] || this.form.name === '' || this.form.phone === '' || this.detail === '') {
        return
      }
      // 解决异步数据需要手动刷新的问题，涉及到同步任务和异步任务
      this.asyncaddAddress(this.form).then(() => {
        this.form = ''
        this.$router.back()
      })
    },
    async asyncaddAddress () {
      await addAddress(this.form)
    },
    async AsyncGetAreaList () {
      const {
        data: { list }
      } = await getAreaList()
      this.areaList = list
      const provinceId = Object.keys(list)[0]
      const city = list[provinceId].city
      const cityId = Object.keys(city)[0]
      const regionId = Object.keys(city[cityId].region)[0]

      this.provinceId = provinceId
      this.cityId = cityId
      this.regionId = regionId
    },
    getProvinces (value) {
      this.provinceId = +value
      this.cityId = Object.keys(this.myCity)[0]
    }
  },
  computed: {
    myCity () {
      return this.areaList[this.provinceId].city
    },
    region () {
      const region = this.myCity[this.cityId].region
      return region
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep select {
  width: 68px;
  margin-right: 23px;
  border: 0;
}

::v-deep select::-webkit-scrollbar {
  width: 0.5rem;
  background: transparent;
}
</style>
